<!-- 收入账单详情页面 -->
<link rel="stylesheet" href="/css/afterLoginPage.css">
<style>
.red{
	color:red!important;
}
.content-top{
    width: 100%;
    box-sizing: border-box;
    padding: 10px 20px;
}
.content-top p{
    margin-top: 15px;
    margin-bottom: 24px;
}
.content-top .title{
	font-size: 16px;
	color: #979797;
	margin-right:20px;
}
.content-top .price{
	font-size: 16px;
	color: #FF1D1D;
}
.content-top .unit{
	font-size: 12px;
	color: #000000;
}
.content-top .layui-btn-ccc{
	color:#fff;
	background:#9d9b9b !important;
}
.content-top .tip{
	color:#cacac9;
	font-size:12px;
	margin-left:15px;
}
.search-middle{
	padding: 5px;
	margin-top:36px;
}
.search-middle .layui-form-label{
	text-align:left;
	font-size: 14px;
	color: #595959;
}
table.user-table {
   width: 100%;
   table-layout: fixed;
}
table.user-table tr th,
table.user-table tr td {
 	word-break:keep-all;
    white-space:nowrap; 
    overflow:hidden;
    text-overflow:ellipsis;
}
table.user-table tr th {
	background: #E7E7E7;
	border-radius: 3px;
	height: 30px;
	font-size: 14px;
	color: #4D4D4D;
	text-align: center;
	border: 3px solid #fff;
}
table.user-table tr td {
	height: 60px;
	font-size: 12px;
	color: #4D4D4D;
	text-align: center;
}
table.user-table tr{
    border-bottom: 1px solid #ddd;
}
table.user-table tr:nth-of-type(even) {
	background: #EFEFEF;
	
}
.info{
	font-size: 14px;
	color: #6AD2E7;
}
.billing-details{
	font-size: 14px;
	color: #6F6F6F;
	text-align:center;
}
.layui-btn{
	display: inline-block;
    text-align: center;
    width: 20%;
    height: 40px;
    line-height: 40px;
    color: #fff;
    background: linear-gradient(90deg, #29D5F6, #6840E0 );
    border-radius: 2px;
    border: 0;
    box-shadow: 0 2px 17px 0 rgba(0,87,255,0.51);
    cursor: pointer;
}
.p-btn{
	text-align: right;
    margin: 0;
}
/* 移动端 */
@media screen and (max-width: 414px),@media screen  and (orientation: landscape),
only screen and (max-device-width: 414px) {
	.layui-tab .layui-tab-content {
	    padding: 0px!important;
	}
	.pc{
		display: none!important;
	}
	.phone-equestWithdrawal{
		display: block;
		text-align: center;
		margin-bottom: 0.693333rem;
	}
	.phone-tip{
		display: block;
		width: 100%;
		text-align: center;
	}
	.phone-search-middle{
		display: flex;
		position: relative;
		padding: 0.266667rem;
		align-items: center;
	    justify-content: space-between;
	}
	.phone-line{
		display: block;
		width: 100%;
		height:0.266667rem;
	    background: #ece1d7;
	}
	.phone-search-middle .title{
		font-size: 0.426667rem;
		color: #070707;
	}
	.phone-search-middle .info-tip{
		font-size: 0.266667rem;
		color: #A0A0A0;
	}
	.content-top {
	    padding: 0.266667rem;
	}
	.content-top p {
	    margin-top: 0.4rem;
	    margin-bottom: 0.64rem;
	}
	.content-top .title {
	    font-size: 0.426667rem;
	    margin-right: 0.533333rem;
	}
	.content-top .price {
	    font-size: 0.426667rem;
	}
	.content-top .unit {
	    font-size: 0.32rem;
	}
	.phone-info{
		display: block;
		margin:0!important;
		text-align: right!important;
		margin-bottom: 0.24rem!important;
		font-size: 0.373333rem;
		color: #47DCF0;
	}
	.phone-info a{
		font-size: 0.373333rem;
		color: #47DCF0;
	}
	.info {
		display: none;
	    font-size: 0.373333rem;
	}
	.layui-btn {
		width:inherit;
	    height: 1.013333rem!important;
	    line-height: 1.013333rem!important;
	    padding: 0 0.48rem!important;
	    font-size: 0.373333rem!important;
	    border-radius: 0.053333rem!important;
	}
	.content-top .tip {
	    font-size: 0.32rem;
	    margin-left: 0.2rem;
	}
	.table-list{
	    padding: 0 0.266667rem;
	}
	table.user-table tr {
	    border-bottom: 0.026667rem solid #ddd;
	}
	table.user-table tr th {
	    border-radius: inherit!important;
	    background: #ECE1D5;
	    height: 0.8rem;
        line-height: normal;
	    font-size: 0.373333rem;
        border: 0.08rem solid #ECE1D5;
	}
	table.user-table tr td{
	    height: 1.2rem;
	    font-size: 0.32rem;
	}
	.billing-details {
	    font-size: 0.373333rem;
	}
}
</style>
<div class="main layui-clear" style="min-height: 600px;position: relative;">
	<div class="layui-bar">
    	<div class="layui-breadcrumbs">
    		<a class="home" href="/"></a>
			<i class="layui-icon">&#xe602;</i>
	  		<a href="#">账户</a>
	  		<i class="layui-icon">&#xe602;</i>
	  		<a href="#">个人资料</a>
    	</div>
    </div>
    <#include "/apps/user/userTopInformation.html">
	 <div class="ukefu-profile-menu">
		<#include "/apps/user/userinfo.html">
	</div>
	
	<div class="ukefu-profile">
		<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" style="margin:10px 20px;">
			<#include "/apps/user/profilemenu.html">
			<div class="layui-tab-content">
				<!-- 收入账单 -->
				<div class="layui-tab-item layui-show">
					<div class="layui-form mine-view" style="display: block;">
						<div class="content-top">
							<p class="p-btn"><a id="pay-btn" href="/deposit/depositList.html" class="layui-btn  layui-btn">返回提现</a></p>
							<p class="billing-details">账单详情</p>
						</div>
						<div class="table-list">
							<table class="user-table">
						    	<thead>
							    	<tr>
								    	<th width="25%">案例</th>
								    	<th width="25%">价格</th>
								    	<th width="25%">购买用户</th>
								    	<th width="25%">购买时间</th>
							    	</tr>
						    	</thead>
						    	<tbody>
						  
						    		<#if billlist??>
									<#list billlist.content as list>
										<tr>
									    	<td>${list.microcaseTitle!''}</td>
									    	<td class="red">￥${list.totalAmount!?string('0.00')}</td>
									    	<td>${list.user.username!''}</td>
									    	<td>${list.paymentTime!?string("yyyy-MM-dd")}</td>
								    	</tr>
									</#list>
									</#if>
						    	</tbody>
						    </table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div style="text-align: center" class="front-desk">
		<div class="laypage-main" id="pages"></div>
	</div>
</div>
<script>

var billlist = [];

<#list billlist.content as list>
billlist.push({"microcase.title":"${list.microcase.title!''}","totalAmount":"${list.totalAmount!''}","user.username":"${list.user.username!''}","paymentTime":"${list.paymentTime}"});
</#list>

console.log("billlist==》",billlist);

layui.use(['laypage', 'layer','laydate'], function(){
	var laypage = layui.laypage;
  	laypage({
	    cont: 'pages'
	    ,first:'首页'
	    ,last:'末页'
	    ,pages: ${billlist.totalPages}
	    ,curr:${billlist.number+1}
	    ,skin: '#32c24d'
    	,skip: true
	    ,jump:function(obj, first){
	    	var curr = obj.curr;
	    	if (!first) {
               location.href = '/deposit/incomeList?p=' + curr + "<#if RequestParameters['q']?? && RequestParameters['q'] != ''>&q=${RequestParameters['q']}</#if>";
            }
	    }
	});
});


</script>







